<template>
  <div
    ref="customForm"
    class="field-group"
  >
    <div class="collapse-container">
      <van-cell
        class="van-cell-custom"
        is-link
        :border="false"
        @click.stop="triggerCell"
      >
        <template #title>
          <van-icon
            v-if="open"
            :class="[
              'icon',
              { 'icon--active': active }
            ]"
            :name="iconName"
          />
          <span class="text text-title">{{ label }}</span>
        </template>
        <template #right-icon>
          <span
            v-if="open"
            class="text text-right-icon"
          >{{ active | activeBool }}</span>
        </template>
      </van-cell>
      <collapse>
        <div v-show="active">
          <div
            class="collapse-item"
          >
            <VanFormGenerator
              ref="formGenerator"
              v-bind="{ formGenerator: fileds }"
            />
          </div>
        </div>
      </collapse>
    </div>
  </div>
</template>

<script>
import collapse from '@/components/TransitionCollapse';
import field from '../mixins/field';
import collect from '../mixins/collect/group';
import group from '../mixins/group';

export default {
  name: 'FieldGroup',

  components: {
    collapse
  },

  mixins: [field, collect, group]
};
</script>

<style lang="scss" scoped>
.collapse-container {
  margin-top: $margin-xs;
  .van-cell-custom {
    padding: $padding-xs;
    background-color: #EDF4FF;
    border-bottom: 1px solid rgba($color: $gray-7, $alpha: 0.5);
    border-radius: 5px;
  }
  .icon {
    transition: all 0.3s;
    margin-right: 5px;
    color: $theme-color;
  }
  .icon--active {
    transform: rotate(180deg);
  }
  .text-title {
    font-weight: bold;
  }
  .text-right-icon {
    color: $theme-color;
  }

  .collapse-item {
    padding: 0 $padding-xs;
  }
}
</style>
